<template>
    <div>
        <header class="ser-top f-bgw f-fs16 f-pk f-dfc f-tac">
            <span icon="back" class="iconfont icon-back f-dfc" @click="$router.back(-1)">返回</span>
            <p :class="['f-fx1',active===0  && 'tab-act']" @click="tab(0)">今日开服</p>
            <p :class="['f-fx1',active===1  && 'tab-act']" @click="tab(1)">明日开服</p>
        </header>
        <div v-for="(item,index) in content" :key="index" :class="active!=index && 'f-dn'">
            <div v-for="(tdItem,ind) in item" :key="ind" class="ser-today-con">
                <div class="ser-left f-dfc f-fs14 f-bgw"><i class="ser-pointer">●</i>{{ind}}</div>
                <ul class="ser-right f-pr">
                    <li v-for="(item,indx) in tdItem" :key="indx" class="f-dfc f-pr">
                        <router-link tag="div" :to="`/detail/${item.gameid}`" class="f-dfc f-fx1">
                            <p class="f-pr">
                                <img :src="item.image" class="ser-img" />
                                <i class="ser-rate f-pa f-cfff">{{item.min_rate | zero}}折</i>
                            </p>
                            <div class="f-dfc ser-notice-item f-w90">
                                <p class="game-name f-fs14 f-thd f-ib">{{item.gamename}}</p>
                                <p class="ser-name">{{item.sername}}</p>
                            </div>
                        </router-link>
                        <buttons :id="item.gameid"/>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'sermore',
    data(){
        return{
            today_con:null,
            tommory_con:null,
            content:null,
            active:0,
            firstTop:0,
            todayTime:null
        }
    },
    methods:{
        tab(id){
            this.active=id;
        },
        filterDay(ser){
            let today={};
            ser.map((el,ind,array)=>{
                //console.log(el)
                let ser = new Date(+el.sertime*1e3),
                date = ser.getDate(),
                nows = new Date().getDate(),
                str=`${this.$zero(ser.getHours())}:${this.$zero(ser.getMinutes())}`;
                if(today[str]===undefined){//分配初始值
                    today[str]=[]
                }
                today[str].push(el)
            })
            return today;
        }
    },
    mounted(){
        this.$ajax.Index.serverTime().then(({data:{data:{today_server,tommory_server}}})=>{
            this.content=[this.filterDay(today_server),this.filterDay(tommory_server)]
            //console.log(this.content)
        })
    }
}
</script>
<style scoped lang="less">
.ser-top{
    padding-left: 10px;
    p{
        margin: 25px 0 0;
        &:after{
            content: '';
            display: block;
            height: 2PX;
            width:40%;
            margin:20px auto 0;
        }
    }
}
.tab-act{
    color: #FFC904!important;
}
.tab-act:after{
    background-color:#FFC904; 
}
.mint-tab-container-item{
    padding-right: .4rem;
}
.ser-pointer{
    color: #FFC904!important;
}


.ser-left{
    height: 1rem;
    position: sticky;
    top:90px;
    z-index: 9;
}
.ser-right{
    padding-left:.5rem;
    border-left: 2px dashed #FFC904;
    margin: 0 0 0 .5rem;
    li{
        padding-right: 20px;
    }
}
.ser-notice-item{
    align-items: flex-start;
}
.ser-pointer{
    font-size: 25PX;
    margin: 0 .2rem;
}
.ser-img{
    width:180px;
    margin-right: .5rem;
}
.ser-notice-item{
    flex-direction: column;
}
.game-name{
    margin-bottom: .2rem;
}
.ser-rate{
    top:0;
    left:0;
    background-color: #FFA321;
    padding: 0 .1rem;
    border-radius: 8px;
}
.ser-name{
    color:#ff5102;
}
</style>

